<!--
 * @Date: 2024-03-20 10:21:06
 * @Author: ljc
 * @LastEditors: g05047
 * @LastEditTime: 2025-02-14 16:19:55
 * @Description: 参数弹框
-->
<template>
  <el-drawer v-if="visible"
    v-model="visible"
    :modal="false"
    size="50%"
    :append-to-body='false'
    :show-close="true"
    :with-header="true">
    <template #header="{ titleId }">
      <h3 :id="titleId"
        class="header-title">参数配置</h3>
    </template>
    <template #default>
      <div class="drawer-content">
        <ParamTable class="param-table"
          ref="paramTableRef"
          :schema="schema"
          :dataSource="dataSource" />
      </div>
    </template>
    <template #footer>
      <div style="padding-bottom: 10px;padding-right: 10px;">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary"
          @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import ParamTable from './ParamTable.vue';
const props = defineProps({
  schema: { type: Object },
  dataSource: { type: Object }
})

const visible = ref(false);
/**
 * 打开抽屉
 * @param {Object} nodeValue - 传入的节点值
 */
const handleOpen = (nodeValue) => {
  visible.value = true;
}
/**
 * 关闭抽屉
 */
const handleClose = () => {
  visible.value = false;
}
//表格ref
const paramTableRef = ref(null);
/**
 * 获取表格数据
 */
const handleConfirm = () => {
  visible.value = false;
  const tableData = paramTableRef.value.handleGetTable();
  props.dataSource.sqlConfig.paramColumns = tableData
}
// 对外暴露方法
defineExpose({
  handleOpen,
  handleClose
});
</script>
<style lang="scss" scoped>
.header-title {
	font-weight: 700;
}
.drawer-content {
	height: 100%;
	.param-table {
		height: 100%;
	}
}
</style>
